<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HKXDR</title>
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="res/layui/css/layui.css">
  <style>
    @charset 'utf-8';

    @font-face {
      font-family: SourceHanSansCN-Regular;
      src: url("res/css/SourceHanSansCN-Regular.otf");
    }
    body {
      width: 800px;
    }
    .content {
      margin: 0 auto;
      padding: 30px 0;
      padding-bottom: 0;
      box-sizing: border-box;
      text-align: left;
      width: 800px;
      height: 410px;
      overflow-x: hidden;
      overflow-y: auto;
      font-size: 14px;
      border-bottom: 1px solid  rgba(0,0,0,0.06);;
    }
    
    /* 输入框 start */
    .word-input {
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      height: 32px;
      width: 362px;
      margin: 0 20px 0 18px;
      padding: 0 12px;
      box-sizing: border-box;
    }

    #main-input {
      width: 430px;
      margin-bottom: 0;
    }

    .word-input:hover {
      border: 1px solid rgba(75, 110, 239, 1);
    }

    .word-input:focus {
      border: 1px solid rgba(75, 110, 239, 1);
      box-shadow: 0 0 0 2px rgba(75, 110, 239, 0.3);
    }
    /* 输入框 end */

    .top-part {
      margin-bottom: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.65);
      line-height: 22px;
      margin-left: 102px;
    }
    
    /* 按钮 start */
    .btn-part {
      color: #4B6EEF;
      line-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
    }

    .btn {
      width: 24px;
      height: 24px;
      border-radius: 24px;
      line-height: 24px;
      cursor: default;
      background: #FFFFFF;
      border: 1px solid rgba(229, 229, 229, 1);
      text-align: center;
      color: #5b5d66;
      font-weight: bold;
    }

    .btn .layui-icon {
      font-size: 12px;
    }

    .btn:hover {
      border: 1px solid rgba(75, 110, 239, 1);
      color: #4B6EEF;
    }

    .add-btn {
      border-color: #4B6EEF;
      background: #4B6EEF;
      color: #FFFFFF;
      margin-right: 4px;
    }

    .add-btn:hover {
      border-color: #6383FB;
      background: #6383FB;
      color: #FFFFFF;
    }
    /* 按钮 end */

    /* 包含部分 新增 start */
    .added-part {
      display: inline-flex;
      align-items: stretch;
      justify-content: flex-start;
      margin-left: 170px;
    }

    .text-part {
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .text-part::after {
      content: '';
      background: #A7B8FD;
      width: 1px;
      height: 100%;
      position: absolute;
      left: 50%;
      z-index: -1;
    }

    .text-content {
      /* position: absolute; */
      background: #E5EAFF;
      border-radius: 4px;
      color: #4B6EEF;
      line-height: 22px;
      line-height: 22px;
      padding: 0 4px;
      white-space: nowrap;
    }

    .added-item {
      margin-bottom: 14px;
      display: flex;
      align-items: center;
    }

    .added-item:last-child {
      margin-bottom: 0;
    }
    /* 包含部分 新增 end */

    /* 滚动条 */
    ::-webkit-input-placeholder {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.25);
      line-height: 22px;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 8px rgba(144, 147, 153, .3);
      background: rgba(144, 147, 153, .3);
      /*颜色*/
    }

    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 8px rgba(144, 147, 153, .3);
      background: #ffffff;
    }
  </style>
  <script src="res/js/qwebchannel.js"></script>
</head>

<body>
  <div class="content">
    <div class="top-part">
      词条<span id="word-no">1</span>：<input id="main-input" class="word-input" type="text" placeholder="多个关键词以竖线“｜”分隔…" autocomplete="off">
      <div class="btn-part">
        <div class="btn add-btn"><i class="layui-icon layui-icon-addition"></i></div>
        （且包含）
      </div>
    </div>
    <!-- 包含部分 -->
    <div class="added-part layui-hide">
      <div class="text-part">
        <div class="text-content">且包含</div>
      </div>
      <div class="added-inputs">
        <!-- 动态创建input -->
      </div>
    </div>
  </div>
  <script src="res/layui/layui.js"></script>
  <script src="res/js/contextMenu.js"></script>
  <script>
    layui.use(function () {
      let $ = layui.$
      // 添加
      $('.add-btn').click(function () {
        // 词条为空 禁用
        if (!$('#main-input').val()) {
          return
        }
        // 移除类名 (默认隐藏的 首条包含部分的input)
        let dom = $('.added-part.layui-hide')
        if (dom.length) {
          $('.added-part').removeClass('layui-hide')
        }
        // 添加 包含部分的input 
        let html = `<div class="added-item">
            <input class="word-input" type="text" placeholder="请输入关键字…" autocomplete="off" />
            <div class="btn close-btn"><i class="layui-icon layui-icon-close"></i></div>
          </div>`
        $('.added-inputs').append(html)
      })
      // 获取当前新增的编号
      $('#word-no').text(window.location.href.split('no=')[1])
      // 移除
      $(document.body).on('click', '.close-btn', function () {
        let length = $('.added-item').length || 0
        if (length === 1) {
          $('.added-part').addClass('layui-hide')
        }
        $(this).parent('.added-item').remove()
      })
    })
  </script>
</body>

</html>